<template>
  <div style="height: 98%; width: 100%">
    <div id="main"></div>
    <div id="main2"></div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { drawChart1, drawChart2 } from "@/util/fun";
import { orderData, dayOrder } from "@/request/api";
const chartData = ref([]);
const time = ref([]);
const value = ref([]);

const getData = async () => {
  const { data } = await orderData();
  const res = await dayOrder();
  time.value = res.data.time;
  value.value = res.data.value;
  chartData.value = data.res;
};

onMounted(async () => {
  await getData();
  var chartDom1: any = document.getElementById("main");
  var chartDom2: any = document.getElementById("main2");
  drawChart1(chartDom1, chartData.value);
  drawChart2(chartDom2, time.value, value.value);
});
</script>
<style>
#main {
  flex: 1;
  height: calc(100% / 2);
}
#main2 {
  flex: 1;
  height: calc(100% / 2);
}
</style>
